import * as PIXI from 'pixi.js'

// fromColor起始颜色，toColor终点颜色， width绘制图形的宽度， height绘制图形的高度
function gradient(fromColor, toColor, width, height) {
    const c = document.createElement("canvas");
    c.width = width;
    c.height = height;
    const ctx = c.getContext("2d");
    const grd = ctx.createLinearGradient(0,0,width, 0);
    grd.addColorStop(0, fromColor); //
    grd.addColorStop(1, toColor);
    ctx.fillStyle = grd;
    ctx.fillRect(0,0,width,height);
    return PIXI.Texture.from(c)
}

// 绘制环形倒计时进度条
export const useSpinnerCountDown = ({
    position,
    innerColor,
    outerStartColor,
    outerEndColor,
    innerRadius,
    outerRadius,
    tips = '',
    parent,
    maxTime,
}) => {
    position = position.map(item => item + outerRadius)
    const circleTimeOutInner = new PIXI.Graphics()
    const circleTimeOutOuter = new PIXI.Graphics()
    let circleTimeOutPI = -Math.PI / 2;
    circleTimeOutInner.beginFill(innerColor)
        .drawTorus(position[0],position[1],innerRadius,outerRadius)
        .endFill();
    // 使用canvas画渐变套进去
    const gradTexture = gradient('#' + outerEndColor.toString(16), '#' + outerStartColor.toString(16), outerRadius * 2, outerRadius * 2)
    let rankBlueBg = new PIXI.Sprite(gradTexture)
    rankBlueBg.width = outerRadius * 2
    rankBlueBg.height = outerRadius * 2
    rankBlueBg.position.set(position[0] - outerRadius, position[1] - outerRadius)
    circleTimeOutOuter.beginFill(outerStartColor)
        .drawTorus(position[0],position[1],innerRadius,outerRadius,circleTimeOutPI, Math.PI + Math.PI / 2)
        .endFill();
    rankBlueBg.mask = circleTimeOutOuter
    // 倒计时文字
    const style = new PIXI.TextStyle({
        fontFamily: 'Roboto-Medium, Roboto',
        fontSize: 20,
        fontWeight: 'bold',
        fill: ['#ffffff'],
    });
    const renderText = text => {
        const timeNum = new PIXI.Text(`${text} s`, style);
        timeNum.anchor.set(0.5, -0.1)
        timeNum.x = position[0];
        timeNum.y = position[1];
        parent.addChild(timeNum);
        return timeNum;
    }
    let time = 0;
    let tn = renderText(maxTime);
    const tipsText = new PIXI.Text(tips, new PIXI.TextStyle({
        fontSize: 12,
        fill: ['#CCD3FF']
    }));
    tipsText.anchor.set(0.5, -2)
    tipsText.x = position[0];
    tipsText.y = position[1];
    parent.addChild(circleTimeOutInner, rankBlueBg, tipsText);
    return (delta) => {
        circleTimeOutPI += 2 * Math.PI / 60 / maxTime
        if (circleTimeOutPI >= Math.PI + Math.PI / 2) {
            circleTimeOutPI = Math.PI + Math.PI / 2
        }
        circleTimeOutOuter.clear()
            .beginFill(outerStartColor)
            .drawTorus(position[0],position[1],innerRadius,outerRadius,circleTimeOutPI, Math.PI + Math.PI / 2)
            .endFill(outerEndColor);
        time += 1;
        if (time > 60 * maxTime) {
            time = 60 * maxTime;
        }
        if (time % 60 === 0) {
            tn.destroy();
            tn = renderText((maxTime - time / 60).toString().padStart(2, '0'));
        }
    }
}